const path = require('path')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const html = require('html-webpack-plugin');
const MiniCss = require('mini-css-extract-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const webpack = require('webpack')
module.exports = {
  mode:'development',
  // entry:'./src/index.js',
  entry:{
    index:'./src/index.js',
    other:'./src/other.js'
  },
  output:{
    filename:'[name].[hash:8].js',
    path:path.resolve(__dirname,'../dist')
  },
  plugins:[
    new CleanWebpackPlugin(),
    new webpack.DefinePlugin({
      isprod: JSON.stringify(false),
     
    }),
    new html({
      template:'./public/index.html',
      filename:'index.html',
      chunks:['index']
    }),
    new html({
      template:'./public/other.html',
      filename:'other.html',
      chunks:['other']
    }),
    new MiniCss({
      filename:'css/index.css'
    })
  ],
  module:{
    rules:[
      {
        test:/\.css$/,
        use:[{
          loader:MiniCss.loader,
          options:{
            esModule:true
          }
        },'css-loader','postcss-loader']
      },
      {
        test:/\.(png|jpg|jpeg)$/,
        use:{
          loader:'url-loader',
          options:{
            name:'img/[name].[ext]',
            limit:100*1024
          }
        }
      },
      {
        test:/\.js$/,
        use:'babel-loader',
        exclude:/node_modules/
      }
    ]
  },
  optimization:{
    minimizer:[
      new OptimizeCssAssetsPlugin(),
      new TerserPlugin()
    ]
  },
  // devtool:'source-map',
  devServer:{
    // 这里所有的配置  只能在开发环境使用 ；生产环境没用
    port:9527,
    // contentBase:'./dist',
    // hot:true,// 热更新  可以在不刷新页面的前提下 更新对应模块；当我们的更改不能触发模块更新 console
    hotOnly:true, // 只热更新 死活不刷新页面
    proxy:{
      '/api':{
        target:'https://baidu.com'
      }
    },
    before:function(app){
      // app.get()
    }
  }
}